<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../common/layui/css/layui.css"/>
    <style>
        body {
            width: 100%;
            height: 100%;
            background-color: #3F3F3F;
        }

        .container {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            margin: 10px auto;
        }

        .memberBox {
            width: 20vw;
            height: 30vh;
            border: 1px solid rgba(163, 163, 163, 0.29);
            background-color: rgba(206, 206, 206, 0.26);
            margin-bottom: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .memberBox .headImg {
            width: 60%;
            height: 60%;
            border-radius: 50%;
            font-size: 20px;
            line-height: 300px;
            text-align: center;
        }

        .memberBox .username {
            font-weight: bold;
            color: #FFB800;
        }

        .memberBox .role {
            color: #ffffff;
            line-height: 20px;
            text-align: center;
            border-radius: 3px;
            width: 40%;
            height: 15%;
            background: #1E9FFF;
        }
    </style>
</head>
<body>
<div class="container">

</div>
</body>
<script src="../../common/layui/layui.js"></script>
<script src="../../js/global.js"></script>
<script id="memberTemplate" type="text/html">
    {{#  layui.each(d.data, function(index, item){ }}
    <div class="memberBox">
        <img class="headImg layui-anim layui-anim-rotate"
             src="{{ item.headImg === null ? '/img/nullHeadImg.png' : item.headImg }}">
        <span class="username">{{ item.name }}</span>
        <span class="role">{{ item.roleName }}</span>
    </div>
    {{# }); }}
</script>
<script>
    layui.use(['jquery', 'laytpl'], () => {
        let $ = layui.jquery, laytpl = layui.laytpl;
        let href = window.location.href, teamId;
        if (href.lastIndexOf("=") !== -1) {
            teamId = href.split("=")[1];
        }
        ajax("/admin/team/checkMember/".concat(teamId), "GET", "", (res) => {
            if (res.code === 0) {
                let getTpl = memberTemplate.innerHTML;
                laytpl(getTpl).render(res, function (html) {
                    $(".container").html(html);
                });
            }
        });
    });
</script>
</html>